## 已实现的功能
### 1. 设备信息的增删改查
- 设备列表展示页面
- 添加新设备功能
- 编辑设备信息
- 删除设备功能
- 设备详情查看
### 2. 设备状态实时监控
- 实时状态显示（工作中、空闲、维护中、离线）
- 设备位置信息展示
- 状态颜色标识
- 设备控制面板
### 3. 设备维护计划与记录管理
- 维护记录管理
- 维护计划制定
- 维护历史查询
- 维护提醒功能
### 4. 设备远程配置和控制
- 远程控制指令发送
- 设备配置参数调整
- 实时控制面板
- 指令执行状态反馈<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="'远程控制 - ' + ${vehicle.name} + ' - 禾行通'">远程控制 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .control-button {
            width: 120px;
            height: 80px;
            margin: 10px;
            font-size: 14px;
        }
        .status-indicator {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 10px;
        }
        .status-online { background-color: #28a745; }
        .status-offline { background-color: #dc3545; }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="fas fa-gamepad"></i> 远程控制</h2>
                    <a th:href="@{/vehicles/{id}(id=${vehicle.id})}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> 返回详情
                    </a>
                </div>
                
                <!-- 设备状态 -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <span class="status-indicator status-online"></span>
                                    <span th:text="${vehicle.name} + ' - 当前状态'"></span>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <h4 th:text="${vehicle.status.description}" class="text-primary"></h4>
                                            <small class="text-muted">设备状态</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <h4 th:text="${vehicle.batteryLevel != null ? vehicle.batteryLevel + '%' : 'N/A'}" class="text-success"></h4>
                                            <small class="text-muted">电池电量</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <h4 th:if="${vehicle.latitude != null and vehicle.longitude != null}" 
                                                th:text="${#numbers.formatDecimal(vehicle.latitude, 1, 4)} + ',' + ${#numbers.formatDecimal(vehicle.longitude, 1, 4)}" 
                                                class="text-info"></h4>
                                            <h4 th:unless="${vehicle.latitude != null and vehicle.longitude != null}" class="text-muted">未知</h4>
                                            <small class="text-muted">当前位置</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <h4 th:text="${vehicle.lastUpdateTime != null ? #temporals.format(vehicle.lastUpdateTime, 'HH:mm:ss') : 'N/A'}" class="text-warning"></h4>
                                            <small class="text-muted">最后更新</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 控制面板 -->
                <div class="row mb-4">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">基本控制</h5>
                            </div>
                            <div class="card-body text-center">
                                <div class="row">
                                    <div class="col-md-12">
                                        <button class="btn btn-success control-button" onclick="sendCommand('start')">
                                            <i class="fas fa-play fa-2x"></i><br>启动
                                        </button>
                                        <button class="btn btn-danger control-button" onclick="sendCommand('stop')">
                                            <i class="fas fa-stop fa-2x"></i><br>停止
                                        </button>
                                        <button class="btn btn-warning control-button" onclick="sendCommand('pause')">
                                            <i class="fas fa-pause fa-2x"></i><br>暂停
                                        </button>
                                        <button class="btn btn-info control-button" onclick="sendCommand('return')">
                                            <i class="fas fa-home fa-2x"></i><br>返回
                                        </button>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <button class="btn btn-secondary control-button" onclick="sendCommand('maintenance')">
                                            <i class="fas fa-wrench fa-2x"></i><br>维护模式
                                        </button>
                                        <button class="btn btn-primary control-button" onclick="sendCommand('charge')">
                                            <i class="fas fa-battery-three-quarters fa-2x"></i><br>充电
                                        </button>
                                        <button class="btn btn-dark control-button" onclick="sendCommand('emergency')">
                                            <i class="fas fa-exclamation-triangle fa-2x"></i><br>紧急停止
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 自定义指令 -->
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">自定义指令</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="customCommand" class="form-label">指令内容</label>
                                    <textarea class="form-control" id="customCommand" rows="3" placeholder="输入自定义指令..."></textarea>
                                </div>
                                <button class="btn btn-primary w-100" onclick="sendCustomCommand()">
                                    <i class="fas fa-paper-plane"></i> 发送指令
                                </button>
                            </div>
                        </div>
                        
                        <!-- 快速操作 -->
                        <div class="card mt-3">
                            <div class="card-header">
                                <h5 class="card-title mb-0">快速操作</h5>
                            </div>
                            <div class="card-body">
                                <button class="btn btn-outline-info btn-sm w-100 mb-2" onclick="refreshStatus()">
                                    <i class="fas fa-sync-alt"></i> 刷新状态
                                </button>
                                <button class="btn btn-outline-warning btn-sm w-100 mb-2" onclick="requestLocation()">
                                    <i class="fas fa-map-marker-alt"></i> 获取位置
                                </button>
                                <button class="btn btn-outline-secondary btn-sm w-100" onclick="resetConnection()">
                                    <i class="fas fa-wifi"></i> 重连设备
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 操作日志 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">操作日志</h5>
                            </div>
                            <div class="card-body">
                                <div id="operationLog" style="height: 200px; overflow-y: auto; background-color: #f8f9fa; padding: 10px; border-radius: 5px;">
                                    <div class="text-muted">等待操作...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const vehicleId = /*[[${vehicle.id}]]*/ 0;
        
        function addLog(message, type = 'info') {
            const log = document.getElementById('operationLog');
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.className = `text-${type} mb-1`;
            logEntry.innerHTML = `<small>[${timestamp}]</small> ${message}`;
            log.appendChild(logEntry);
            log.scrollTop = log.scrollHeight;
        }
        
        function sendCommand(command) {
            addLog(`发送指令: ${command}`, 'primary');
            
            fetch(`/api/vehicles/${vehicleId}/control`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ command: command })
            })
            .then(response => response.text())
            .then(data => {
                addLog(`指令执行成功: ${data}`, 'success');
                setTimeout(refreshStatus, 1000);
            })
            .catch(error => {
                addLog(`指令执行失败: ${error}`, 'danger');
            });
        }
        
        function sendCustomCommand() {
            const command = document.getElementById('customCommand').value.trim();
            if (!command) {
                addLog('请输入指令内容', 'warning');
                return;
            }
            
            sendCommand(command);
            document.getElementById('customCommand').value = '';
        }
        
        function refreshStatus() {
            addLog('刷新设备状态...', 'info');
            
            fetch(`/api/vehicles/${vehicleId}/status`)
                .then(response => response.json())
                .then(data => {
                    addLog('状态刷新成功', 'success');
                    // 更新页面状态显示
                    location.reload();
                })
                .catch(error => {
                    addLog(`状态刷新失败: ${error}`, 'danger');
                });
        }
        
        function requestLocation() {
            addLog('请求设备位置...', 'info');
            sendCommand('get_location');
        }
        
        function resetConnection() {
            addLog('重置设备连接...', 'info');
            sendCommand('reset_connection');
        }
        
        // 页面加载时添加欢迎信息
        document.addEventListener('DOMContentLoaded', function() {
            addLog('远程控制面板已就绪', 'success');
        });
        
        // 每30秒自动刷新状态
        setInterval(refreshStatus, 30000);
    </script>
</body>
</html>